/*
 * @Author: AskMeWhy
 * @Date: 2020-12-23 11:43:52
 * @Last Modified by: AskMeWhy
 * @Last Modified time: 2020-12-24 19:43:32
 */
import { merge, ObserverClass } from "@/utils";

export class Particle extends ObserverClass {
    instance: any;
    style: any;
    position: any;
    value: any;
    placeholder: any;
    type: any;
    data: any;
    maxHeight: any;
    constructor(params: any) {
        super(params);
        this.buildParam(params);
    }

    // 构建参数
    private buildParam(params: any) {
        let option = {
            instance: null,
            style: {},
            position: {},
            value: "", // 值
            placeholder: "", // 提示文字
            // input | date | select | cascader | img | location
            type: "", // 渲染类型
            data: {} // 额外的其他数据
        };
        option = merge(true, option, params);

        merge(true, this, {
            instance: option.instance,
            style: option.style,
            position: option.position,
            value: option.value,
            placeholder: option.placeholder,
            // input | date | select | cascader | img | location
            type: option.type,
            data: option.data
        });
    }

    draw(maxHeight: any, offset: any) {
        const { instance: { ctx }, style } = this;
        const { scrollLeft, scrollTop } = offset;
        this.maxHeight = maxHeight;
        // console.log(position, style, ctx);
        ctx.fillStyle = style.bgColor; // text color
        ctx.textAlign = style.textAlign;
        ctx.textBaseline = style.textBaseline;
        ctx.lineWidth = style.borderWidth;
        ctx.strokeStyle = style.borderColor;
        ctx.save();
        // console.log(scrollLeft, scrollTop);
        ctx.translate(-scrollLeft, -scrollTop);
        this.drawBorder();
        // this.drawBody();
        this.drawText();
        ctx.restore();
    }

    drawBorder() {
        const {
            instance: { ctx },
            style,
            position,
            buildPosition,
            maxHeight
        } = this;
        ctx.beginPath();
        ctx.moveTo(buildPosition(position.x), buildPosition(position.y));
        ctx.lineTo(
            buildPosition(position.x) + style.width,
            buildPosition(position.y)
        );
        ctx.lineTo(
            buildPosition(position.x) + style.width,
            buildPosition(position.y) + maxHeight
        );
        ctx.lineTo(
            buildPosition(position.x),
            buildPosition(position.y) + maxHeight
        );
        ctx.lineTo(buildPosition(position.x), buildPosition(position.y));
        ctx.fill();
        ctx.stroke();
        ctx.clip();
    }

    drawText() {
        const { instance: { ctx }, value, style, position, buildPosition, maxHeight } = this;
        ctx.fillStyle = style.color; // text color
        ctx.font = style.font;
        ctx.fillText(
            value,
            buildPosition(position.x) + style.width / 2,
            buildPosition(position.y) + maxHeight / 2
        );
    }

    buildPosition(value: number) {
        return value;
    }
}
